<template>
  <view class="content">
    <searchInput />
    <!-- 轮播图 -->
    <swiperBox :abc="list" />
    <!-- 选项卡 -->
    <view>
      <segmented-control
        id="tabbar"
        :values="items"
        :stickyTop="108"
        :current="currentTab"
        @clickItem="onClickItem"
      ></segmented-control>
      <view class="list" v-show="currentTab == 0">1</view>
      <view class="list" v-show="currentTab == 1">
        <videoList v-for="(item,index) in videoMsg" :key="index" :current="item"></videoList>
      </view>
      <view class="list" v-show="currentTab == 2">3</view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import segmentedControl from "@/components/segmented-control.vue";
import videoList from "@/components/videoList.vue";
import searchInput from "@/components/searchInput.vue";
import swiperBox from "@/components/swiperBox.vue";
export default Vue.extend({
  components: { segmentedControl, videoList, searchInput,swiperBox },
  data() {
    return {
      list: [
        {
          content: "内容 A"
        },
        {
          content: "内容 B"
        },
        {
          content: "内容 C"
        }
      ],
      items: ["推荐", "直播", "回看"],
      currentTab: 1,
      videoMsg: [
        {
          title:
            "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
          img: "../../static/test.jpg",
          status: "直播"
        },
        {
          title:
            "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
          img: "../../static/test.jpg",
          status: "预约"
        },
        {
          title:
            "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
          img: "../../static/test.jpg",
          status: "回看"
        }
      ]
    };
  },
  onLoad() {
    
  },
  methods: {
   
  }
});
</script>

<style lang="scss">
.content {
  padding: 30upx;
  overflow: hidden;
}
.logo {
  height: 200upx;
  width: 200upx;
  margin-top: 200upx;
}
.title {
  font-size: 36upx;
  color: #8f8f94;
}

.list {
  color: #fff;
  margin-top: 20upx;
}
</style>
